<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>HTML5 accessibility - February 2012</title>
<script>
	function noimage()

{


var imagesOn = (function(){var i=new
Image();i.src='data:image/gif,GIF89a%01%00%01%00%80%00%00%00%00%00%FF%FF%FF!%F9%04%01%00%00%00%00%2C%00%00%00%00%01%00%01%00%00%02%01D%00%3B';return!!i.width})();
//alert(imagesOn); 

if

((document.images[0].readyState='uninitialized'&&document.images[0].naturalHeight=='undefined'&&window.opera==null&&checkHC()!=true)||(document.images[0].naturalHeight>=1&&window.opera==null&&checkHC()!=true)||(imagesOn==true&&window.opera!=null))
{


var objHead = document.getElementsByTagName('head');
var objCSS = objHead[0].appendChild(document.createElement('link'));
    objCSS.rel = 'stylesheet';
    objCSS.href = 'alt.css';
    objCSS.type = 'text/css';

}

}

function checkHC(){
		
			var e,c;
			//Create a test div
			e=document.createElement("div");
			//Set its color style to something unusual
			e.style.color="rgb(31,41,59)";
			//Attach to body so we can inspect it
			document.body.appendChild(e);
			//Use standard means if available, otherwise use the IE methods
			c=document.defaultView?document.defaultView.getComputedStyle(e,null).color:e.currentStyle.color;
			//Delete the test DIV
			document.body.removeChild(e);
			//get rid of extra spaces in result
			c=c.replace(/ /g,"");
			//Check if we got back what we set
			//If not we are in high contrast mode
			
			if (c!="rgb(31,41,59)"){
			return true;
			}
		
		}


</script>
<style type="text/css">
	body 

	{
		font-family: arial, Verdana, helvetica, sans-serif;
		
		color: #333;
		background: #FC0;
		padding: 0;
font-size:90%

	}

	caption {text-align:left;font-weight:bold;font-size:large}

	h1,h2 { font-family: Verdana,arial,  helvetica, sans-serif;
	
	font-size:larger;
	}
	header {border: 1px dashed #ffd700;
	padding:1em;
	margin:0px;}

.navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

	table

	{

		border-collapse: collapse;

		border: 1px solid #630;

		font: normal 80% arial, Verdana, helvetica, sans-serif;
	}



	th, td

	{

		text-align: left;

		vertical-align: top;

		padding: 0.3em;

		border: 1px solid #630;

	}

	th {font-size:150%;}
	td {font-size:130%;}
	td p {margin:0 0 0 0;}
	thead th, thead td

	{

		font-weight: bold;

		text-align: center;

	}

	td span {display:inline-block;padding:2px;}
	span:focus {background:#f5f5f5;border: 2px solid #a0522d;}
	/*td:focus {background:#f5f5f5;border: 2px solid #a0522d;}*/
	caption {text-align:left}


	td.support {background:#90ee90;}
	td.partial {background:#eee8aa;}
	td.nosupport{background:#ffb6c1;}


	td p.note{border: 1px dashed red;padding: 5px;margin-top:5px;background:#FFFFFF}

	td ul  {padding-left:12px}
	/*	img {border: 1px solid #630;}*/
	.test {border: 1px solid #666666;padding:4px;margin-top:15px;background:#FFFFCC}

	
	
		
	
	h3 {
		
		
		font-size:150%;
	}
	
	p, li {font-family: arial}
	
	h2 {
	color: #008000;
}

#float {float:right;}

.nvda { border:1px #ff7f50 solid; font-size: 80%;padding:5px;}

#banner {
	float:left;
	font-size: 250%;
}

#subheader {clear:both}

span.cap {display:inline-block}

ul.sumry li
{
display: inline;
list-style-type: none;
padding-right:1em;
font-weight: bold;
color:#C00;}

span.hidden {
position:relative;
left:0;
top:auto;
width:inherit;
height:inherit;
overflow:inherit;
	
}

header {
	border: 1px dashed #ff8c00;
	padding: 1em;
}
.float {
	float: left;
}
#wrapper {
	width: 90%;
	background-color:#FFF;
	padding: 1em ;
}
.style1 {color: #006600;font-size: large;}
.style2 {color: #CC3300}
.style3 {font-size: large}
.style4 {font-size: large; color: #006600; }
.style5 {color: #FF00FF}
</style>
 
</head>

<body onload="noimage();checkHC();">
<div id="wrapper">
  <header role="banner"> <div id="float">
    <p class="nvda">Use and <a href="http://www.nvaccess.org/wiki/Donate">support</a> <a href="http://www.nvda-project.org/"><abbr title="NonVisual Desktop Access ">NVDA</abbr></a> the open source screen reader for Windows.</p>
    
    <p class="nvda"><strong>HTML5accessibility.com <a href="http://www.paciellogroup.com">developed by TPG</a> <em>your accessibility partner</em>. <br> 
      <a href="http://www.paciellogroup.com/about_7">Contact us</a> for  solutions to your accessibility issues.</strong></p>  
    </div><div><img src="images/HTML5_Logo.png" alt="HTML5" width="128" height="128" border="0"> <img src="images/logo_reasonably_small.png" alt="Accessibility" width="128" height="128"></div>
    <h1>A work in progress: February 2012</h1>
    
    
    <ul class=navlist>
      <li><strong>Also on this site:</strong> <a href="index-aria.html">HTML5 accessibility support work arounds</a>.</li>
      <li><strong>Elsewhere: </strong>French version: <a href="http://www.temesis.com/html5accessibility/" lang="fr" hreflang="fr">L'accessibilité d'HTML5</a></li>
      <li> Italian version: <a href="http://webaccessibile.org/articoli/accessibilita-di-html5/" lang="it" hreflang="it">Accessibilità di HTML5</a></li>
      <li><a href="http://www.paciellogroup.com/blog/?s=%22HTML5+accessibility+chops%22">HTML5 Accessibility Chops</a></li>
      <li><a href="http://dev.w3.org/html5/alt-techniques/developer.html">HTML5: Techniques for providing useful text alternatives - developer edition</a> 
    </ul>
 
  </header>
  
  <div role="main">
    
    <div class=windows>
      <h3><img src="images/windows_logo.gif" width="47" height="48" alt=""> <a href="#wbdetails">Windows Browsers</a> Summary - Firefox has the best HTML5 Accessibility Support Score</h3>
      <p><strong>HTML5 Accessibility Support Score</strong></p>
      <ul class="sumry">
        <li><img src="images/chrome.png" alt="Chrome" width="62" height="61" border="0" id="chrome-img"><meter min="0" max="100" value="24"></meter> 
          <span class="style3">24/100</span></li>
        <li><img src="images/firefox.png" alt="Firefox" width="62" height="61" border="0" id="FF-img">
          <meter min="0" max="100" value="92"></meter>
        &nbsp; <span class="style1">92/100</span></li>
        <li><img src="images/ie.png" alt="Internet Explorer" width="62" height="61" border="0" id="ie-img"><meter min="0" max="100" value="13"></meter>
        &nbsp;<span class="style3" id="ie">22</span><span class="style3">/100</span></li>
        <li><img src="images/opera.png" alt="Opera" width="62" height="61" border="0" id="opera-img"><meter min="0" max="100" value="18"></meter>
      <span class="style3">18/100</span></li>
        <li><img src="images/safari.png" alt="Safari/Webkit" width="62" height="61" border="0" id="wk-img">
        <meter min="0" max="100" value="18"></meter>
        &nbsp;<span class="style3">18/100</span></li>
      </ul>
    </div>   
   <!-- <div class=mac><h3><img src="images/mac-logo.png" width="64" height="64">  Mac Summary</h3>
      <ul class="sumry">
        <li><img src="images/chrome.png" alt="Chrome" width="62" height="61" border="0" id="chrome-img"><meter min="0" max="370" value="145" aria-labelledby="chrome-img chrome"><span id="chrome">145/370</span></meter></li>
        <li><img src="images/firefox.png" alt="Firefox" width="62" height="61" border="0" id="FF-img"><meter min="0" max="100" value="40" aria-labelledby="FF-img FF">Getting better</meter></li>
        <li><img src="images/opera.png" alt="Opera" width="62" height="61" border="0" id="opera-img"><meter min="0" max="100" value="5" aria-labelledby="opera-img op"><span id="op">Poor -</span></meter></li>
        <li><img src="images/safari.png" alt="Safari/Webkit" width="62" height="61" border="0" id="wk-img"><meter min="0" max="100" value="15" aria-labelledby="wk-img wk"><span id="wk">Poor</span></meter></li>
      </ul>
    </div>-->
    <h3><img src="images/mac-logo.png" alt="" width="64" height="64"> <a href="#mbdetails">Mac Browsers</a> Summary - Safari has the best HTML5 Accessibility Support Score</h3>
    <p><strong>HTML5 Accessibility Support Score</strong></p>
    <ul class="sumry">
      <li><img src="images/chrome.png" alt="Chrome" width="62" height="61" border="0" id="chrome-img2">
        <meter min="0" max="100" value="20"></meter>
        <span class="style3">20/100</span></li>
      <li><img src="images/firefox.png" alt="Firefox" width="62" height="61" border="0" id="FF-img2">
        <meter min="0" max="100" value="20"></meter>
      <li><span class="style3">20/100</span></li>

      <li><img src="images/opera.png" alt="Opera" width="62" height="61" border="0" id="opera-img2">
        <meter min="0" max="100" value="14"></meter>
      <span class="style3">14/100</span></li>
      <li><img src="images/safari.png" alt="Safari/Webkit" width="62" height="61" border="0" id="wk-img2">
        <meter min="0" max="100" value="74"></meter>
        &nbsp;<span class="style1">74/100</span></li>
    </ul>
<h3>&nbsp;</h3>
    <h3>Overview</h3>
    <p>This site is  a resource to provide information about which <strong>new <a href="http://dev.w3.org/html5/spec/spec.html">HTML5</a> user interface features</strong> are accessibility supported in browsers, making them usable by people who rely upon assistive technology (AT) to use the web.</p>
<p><strong>Note:</strong> Browser's may not have practical accessibility support for HTML features on particular operating systems. Refer to <a href="http://www.paciellogroup.com/blog/2012/02/rough-guide-browsers-operating-systems-and-screen-reader-support/">Rough Guide: browsers, operating systems and screen reader support</a> for details.</p>
    <p>It is not intended to dissuade developers from <strong>using new <a href="http://dev.w3.org/html5/spec/spec.html">HTML5</a> features</strong>. Sometimes there are better choices, sometimes developers have to add a little extra to make the feature useful or usable, and other times features have simply not been implemented by any browser or only by browsers that do not yet support assistive technologies. As a consequence it may not yet be practical to use a particular <a href="http://dev.w3.org/html5/spec/spec.html">HTML5</a> feature. Example <a href="index-aria.html">work arounds</a> for lack of implementation or lack of accessible implementation are linked from the <a href="index-aria.html">Solutions page</a>.</p>
    <p>The information in the support table is updated on a semi-regular basis, to keep up with support improvements made in browsers as new versions are released.</p>
    <p><a href="#legend">Support Tables - Legend & notes</a></p>
<h3><a name="wbdetails"></a>Windows browsers - Details</h3>
 
    <table width="96%" border="1">
      <caption>
      <img src="images/windows_logo.gif" width="47" height="48" alt=""> New HTML5 feature accessibility support in  Windows Browsers
      </caption>
      <tr>
        <th scope="col">new HTML5 elements</th>
        <th scope="col"><img src="images/chrome.png" alt="" width="62" height="61" border="0">
          <span style="display:block">Chrome 17.0.963.46 beta-m</span></th>
        <th scope="col"><img src="images/firefox.png" alt="" width="62" height="61" border="0">
        <span style="display:block">Firefox 11.0a2 </span></th>
        <th scope="col"><img src="images/ie.png" alt="" width="62" height="61" border="0">
        <span style="display:block">IE 9</span></th>
        <th scope="col"><img src="images/opera.png" alt="" width="62" height="61" border="0">
        <span style="display:block">Opera 11.61 </span></th>
        <th scope="col"><img src="images/safari.png" alt="" width="62" height="61" border="0">
         <span style="display:block">Safari/<br>
            Webkit   r105476</span></th>
        <th scope="col">Notes</th>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-article-element">article</a></code> element </th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p><strong>IE/Opera/Safari:</strong>  provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element</p>
          <p><strong>Chrome:</strong> exposes element with a <code>section</code> role in IA2</p>
        <p><strong>Firefox:</strong> exposes element with a <code>document</code> role in MSAA/IA2 </p></td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-aside-element">aside</a></code> element </th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p><strong>IE/Opera/Safari:</strong> provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element.</p>
          <p><strong>Chrome:</strong> exposes element with a <code>section</code> role in IA2</p>
        <p><strong>Firefox:</strong> exposes  as ARIA  <code>role=&quot;complementary&quot;</code> via IA2 object attribute and IA2 <code>note</code> role. </p></td>
      </tr>
      <tr>
        <th scope="row"><a href="http://dev.w3.org/html5/spec/video.html#audio"><code>audio</code></a> element</th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p><strong>Firefox:</strong> </p>
          <ul>
            <li>Exposes controls via accessibility APIs, but individual controls cannot be interacted with via the keyboard.</li>
            <li>keyboard access is provided via <a href="http://support.mozilla.org/en-US/kb/Viewing%20video%20in%20Firefox%20without%20a%20plugin#w_keyboard-controls">Firefox specific shortcuts</a></li>
            <li>Exposes element name as an IA2 object attribute</li>
            <li>role=grouping</li>
          </ul>
          <p><strong>Opera</strong>: has<strong> </strong>keyboard support, but no AT support.</p>
          <p>&nbsp;</p>
          <p><strong>IE 9:</strong></p>
          <ul>
            <li>Exposes controls via accessibility APIs, but individual controls cannot be interacted with via the keyboard.        </li>
            <li>default accessible name of 'audio'</li>
            <li>role=grouping        </li>
          </ul>
        <p>Refer to: <a href="http://www.robwinters.co.uk/2010/08/31/keyboard-access-for-html5-video/" rel="bookmark" title="Permanent Link to Keyboard access for HTML5 video">Keyboard access for HTML5 video</a> for more information.</p></td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://dev.w3.org/html5/spec/the-canvas-element.html#the-canvas-element">canvas</a></code> element</th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p><strong>Internet Explorer 9: </strong>supports the accessible canvas element sub-DOM, but not  caret or focus exposure.</p></td>
      </tr>
      <!--<tr>
    <td><a href="http://dev.w3.org/html5/spec/interactive-elements.html#the-command">command</a> element</td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>not implemented</td>
  </tr>-->
      <tr>
        <th scope="row"><code><a href="http://www.w3.org/TR/html5/forms.html#the-datalist-element">datalist</a></code> element </th>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><p><strong>Opera</strong>: keyboard accessible. </p>
          <p><strong>Firefox</strong>: keyboard accessible. list items exposed correctly, but presence of datalist   not indicated when focus is on the edit box, (suggest text field should be exposed as a <code>combobox</code> or presence of list indicated by <code>haspopup</code> property)        </p>
        <p><strong>Chrome:</strong> keyboard accessible. Does not expose datalist as list, does not convey presence of data list from the edit box</p></td>
      </tr>
      <tr>
        <th scope="row"><a href="http://dev.w3.org/html5/spec/interactive-elements.html#the-details-element"><code>details</code></a> element</th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p>Currently provides the same amount of semantic information to AT as a div element.</p>
          <p><strong>Chrome &amp; Webkit: </strong>implemented, but no keyboard or AT support.</p>
        <p>&nbsp;</p></td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://dev.w3.org/html5/spec/grouping-content.html#the-figcaption-element">figcaption</a></code> element</th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</p>
        <p><strong>Firefox:</strong> exposes element as Ia&quot; caption role and the element name as an IA2 object attribute, exposes the  <code>figcaption</code> content as an accessible name for its parent <code>figure</code>.</p></td>
      </tr>
      <tr>
        <th scope="row"><code><A href="http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element">figure</A></code> element</th>
        <td><img src="images/cross.png" alt="not supported" width="16" height="16" border="0"><span class="hidden">Not supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p><strong>IE/Opera/Safari:</strong> provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element</p>
          <p><strong>Chrome:</strong> exposes element with a <code>section</code> role in IA2</p>
<p><strong>Firefox:</strong> exposes element role=group with accessible name from figcaption.</p></td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-footer-element">footer</a></code> element </th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p><strong>IE/Opera/Safari:</strong> provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element</p>
          <p><strong>Chrome:</strong> exposes element with a <code>section</code> role in IA2</p>
<p><strong>Firefox:</strong> exposes  as ARIA landmark <code>role=&quot;contentinfo&quot;</code> Refer to <a href="http://www.paciellogroup.com/blog/2011/03/html5-accessibility-chops-section-elements/">HTML5 Accessibility Chops: section elements</a></p></td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-header-element">header</a></code> element </th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p><strong>IE/Opera/Safari:</strong> provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element</p>
          <p><strong>Chrome:</strong> exposes element with a <code>section</code> role in IA2</p>
<p><strong>Firefox:</strong> exposes element name<code></code> via IA2 object attribute. </p></td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-hgroup-element">hgroup</a></code> element </th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><p>not implemented</p></td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/number-state.html#color-state">color</a><code> <a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><strong>Opera:</strong> keyboard accessible, but no information exposed to assistive technology.</td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#date-state" title="attr-input-type-date">Date</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><span class="hidden">Not supported</span><img src="images/cross.png" width="16" height="16" alt=""></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><p><strong>Opera</strong>: date picker cannot be activated using the keybaord, no information exposed to assistive technology.</p></td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#date-and-time-state" title="attr-input-type-datetime">Date and Time</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><p><strong>Opera</strong>: date picker cannot be activated using the keybaord, no information exposed to assistive technology.</p>
        <p>&nbsp;</p></td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#local-date-and-time-state" title="attr-input-type-datetime-local">Local Date and Time</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code> </th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><p><strong>Opera</strong>: date picker cannot be activated using the keybaord, no information exposed to assistive technology.</p>
        <p>&nbsp;</p></td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#e-mail-state" title="attr-input-type-email">E-mail</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td>? mostly not implemented.</td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#month-state" title="attr-input-type-month">Month</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><p><strong>Opera</strong>: date picker cannot be activated using the keybaord, no information exposed to assistive technology.</p>
        <p>&nbsp;</p></td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#number-state" title="attr-input-type-number">Number</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><p><strong>Opera</strong>: keyboard accessible.</p>
        <p><strong>Chrome : </strong>keyboard accessible<strong>, </strong>role exposed as edit box should be spinbutton.</p>
        <p><strong>Safari:</strong>  keyboard support.</p></td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#range-state" title="attr-input-type-range">Range</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><p><strong>Chrome:</strong> correct role, full keyboard support, slider value exposed.</p>
          <p><strong>Opera:</strong> no role, partial keyboard support, slider value not exposed.</p>
        <p><strong>Safari:</strong>   partial keyboard support.</p></td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#text-state-and-search-state" title="attr-input-type-search">Search</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td>The difference between <code>input type=&quot;search&quot;</code> and <code>type=&quot;text&quot;</code> is '<a href="http://dev.w3.org/html5/spec/states-of-the-type-attribute.html#text-state-and-search-state">primarily stylistic</a>'.</td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#telephone-state" title="attr-input-type-tel">Telephone</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code> </th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td>?</td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#time-state" title="attr-input-type-time">Time</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><p><strong>Opera</strong>: keyboard accessible.</p>
        <p><strong>Chrome: </strong>keyboard accessible<strong>, </strong>role exposed as edit box should be spinbutton</p></td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#url-state" title="attr-input-type-url">URL</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code> </th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td>?</td>
      </tr>
      <tr>
        <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#week-state" title="attr-input-type-week">Week</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><p><strong>Opera</strong>: date picker cannot be activated using the keybaord, no information exposed to assistive technology.</p>
        <p><strong>Chrome : </strong>keyboard accessible<strong>, </strong>role exposed as edit box should be spinbutton</p></td>
      </tr>
      <!--<tr>
    <td><code><A href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-mark-element">mark</A></code></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td>Currently provides the same amount of semantic information to AT as a span element</td>
  </tr>-->
      <tr>
        <th scope="row"><code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code> &gt; <a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menu-state" title="context menu state">context menu</a></th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><strong>Firefox:</strong> </td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code>&gt; <a href="http://www.w3.org/TR/html5/interactive-elements.html#list-state" title="list state">list</a></th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td>not implemented </td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code> &gt; <a href="http://www.w3.org/TR/html5/interactive-elements.html#toolbar-state" title="toolbar state">toolbar</a></th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td>not implemented </td>
      </tr>
      <!--<tr>
    <td>descendant element (type=&quot;checkbox&quot;) of a <code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code>  type=&quot;list&quot; </td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>not implemented </td>
  </tr>
  <tr>
    <td>descendant element (type=&quot;command&quot;) of a <code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code> type=&quot;list&quot; </td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>not implemented </td>
  </tr>
  <tr>
    <td>descendant element (type=&quot;radio&quot;) of a <code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code> type=&quot;list&quot; </td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>not implemented </td>
  </tr>-->
      <tr>
        <th scope="row"><a href="http://dev.w3.org/html5/spec/the-button-element.html#the-meter-element">meter</a> element</th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p><strong>Chrome: </strong>name, role, properties not exposed.</p>
        <p><strong>Opera:</strong>name, role, properties not exposed.</p></td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-nav-element">nav</a></code> element </th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p><strong>IE/Opera/Safari:</strong> provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element.</p>
          <p><strong>Chrome:</strong> exposes element with a <code>section</code> role in IA2</p>
        <p><strong>Firefox:</strong> exposes  as ARIA landmark <code>role=&quot;navigation&quot;</code> via IA2 object attribute, and as   a <code>section</code> role in IA2 (Unsure about the correctness of this mapping). Refer to <a href="http://www.paciellogroup.com/blog/2011/03/html5-accessibility-chops-section-elements/">HTML5 Accessibility Chops: section elements</a></p></td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://dev.w3.org/html5/spec/the-button-element.html#the-output-element">output</a></code> element</th>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span><br> <img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span> </td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><strong>Firefox:</strong> accessibility support implemented -  IA2 <code>section</code> role,  with <code>aria-live=polite</code> and hasIA2 <code>controlled_by relation</code> defined by <code>@for</code> attribute.</td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://www.w3.org/TR/html5/forms.html#the-progress-element">progress</a></code> element </th>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><p><strong>Chrome: </strong>exposes name role, state and value correctly!</p>
        <p><strong>Opera:</strong> name, role and state content not exposed.</p>
        <p><strong>Firefox: </strong>exposes name role, state and value correctly!</p></td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-section-element">section</a></code> element </th>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p><strong>IE/Opera/Safari:</strong> provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element</p>
          <p><strong>Chrome:</strong> exposes element with a <code>section</code> role in IA2</p>
<p><strong>Firefox:</strong> exposes element with a <code>paragraph</code> role in IA2 (Unsure about the correctness of this mapping). Refer to <a href="http://www.paciellogroup.com/blog/2011/03/html5-accessibility-chops-section-elements/">HTML5 Accessibility Chops: section elements</a></p></td>
      </tr>
      <tr>
        <th scope="row"><code><a href="http://dev.w3.org/html5/spec/interactive-elements.html#the-summary-element">summary</a></code> element</th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
        <td><span class="hidden">Not supported</span><img src="images/cross.png" width="16" height="16" alt=""></td>
        <td><p><strong>IE/Opera/Safari:</strong> provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element</p>
        <p><strong>Chrome:</strong> no keyboard access.  Exposes element with a <code>section</code> role in IA2. no state or name information exposed.</p>
        <p>Webkit:no keyboard access. No role/name/state information exposed.</p></td>
      </tr>
      <!--<tr>
    <td><code><A href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-time-element">time</A></code> element</td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td>Currently provides the same amount of semantic information to AT as a span element</td>
  </tr>-->
      <tr>
        <th scope="row"><a href="http://dev.w3.org/html5/spec/video.html"><code>video</code></a> element</th>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
        <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
        <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
        <td><p><strong>Firefox:</strong> keyboard support suboptimal - cannot interact with individual controls.</p>
          <p><strong>Opera</strong>: has<strong> </strong>keyboard support, but no AT support.        </p>
          <p><strong>IE 9</strong>: keyboard support suboptimal - cannot interact with individual controls</p>
        <p>Refer to: <a href="http://www.robwinters.co.uk/2010/08/31/keyboard-access-for-html5-video/" rel="bookmark" title="Permanent Link to Keyboard access for HTML5 video">Keyboard access for HTML5 video</a> for more information about keyboard access.</p></td>
      </tr>
    </table>
  </div>
  <hr>
  <table width="96%" border="1">
    <caption>
    <img src="images/windows_logo.gif" width="47" height="48" alt="">New HTML5 attribute accessibility support in Windows Browsers
    </caption>
    <tr>
      <th scope="col">new HTML5 attributes (note: this is not all of them!)</th>
       <th scope="col"><img src="images/chrome.png" alt="" width="62" height="61" border="0">
          <span style="display:block">Chrome 17.0.963.46 beta-m</span></th>
        <th scope="col"><img src="images/firefox.png" alt="" width="62" height="61" border="0">
    <span style="display:block">Firefox 11.0a2 </span></th>
        <th scope="col"><img src="images/ie.png" alt="" width="62" height="61" border="0">
        <span style="display:block">IE 9</span></th>
        <th scope="col"><img src="images/opera.png" alt="" width="62" height="61" border="0">
        <span style="display:block">Opera 11.61 </span></th>
        <th scope="col"><img src="images/safari.png" alt="" width="62" height="61" border="0">
         <span style="display:block">Safari/<br>
            Webkit   r105476</span></th>
      <th scope="col">Notes</th>
    </tr>
    <!--<tr>
    <td><code><a href="http://dev.w3.org/html5/spec/dnd.html#the-draggable-attribute">draggable</a></code> attribute</td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td>&nbsp;</td>
  </tr>-->
    <tr>
      <th scope="row"><a href="http://dev.w3.org/html5/spec/editing.html#the-hidden-attribute">hidden</a> attribute</th>
      <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
      <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
      <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
      <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
      <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
      <td><p><strong>Chrome, Opera, Firefox &amp; Safari: </strong>Content within elements that have a hidden attribute are not displayed or navigable. </p>
        <p><strong>Note:</strong> In all supporting browsers CSS <code>display:none</code> is applied to elements with the <code>hidden</code> attribute.<br>
      </p></td>
    </tr>
    <tr>
      <th scope="row"><a href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-required"><code>required</code></a> attribute</th>
      <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
      <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
      <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"><span class="hidden">Not supported</span></td>
      <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
      <td><p><strong>Firefox:</strong> announces popup message and identifies the field as invalid.</p>
      <p><strong>Chrome</strong>: exposes as IA2 required state.</p></td>
    </tr>
    <tr>
      <th scope="row"><a href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#the-placeholder-attribute"><code>placeholder</code></a> attribute</th>
      <td><img src="images/cross.png" width="16" height="16" alt=""> <span class="hidden">Not supported</span></td>
      <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
      <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
      <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
      <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
      <td><p><strong>Safari</strong>: <code>placeholder</code> content is exposed as an accessible name if the <code>input</code> does not have an explicitly associated text label, but explicit association using the HTML<code> label </code>element is not currently supported in Webkit based browsers on Windows. Only explicit association using the <code>title</code> attribute on the <code>input</code> overrides the use of the <code>placeholder</code> text as the accessible name.</p>
        <p><strong>Firefox</strong>: <code>placeholder</code> content is exposed as an accessible name if the <code>input</code> does not have an explicitly associated text label using the<code> label</code> element. If there is a label associated using the <code>label</code> element using the <code>for/id</code> attributes, the accessible name is the label text. If the <code>label</code> element is wrapped around the control, the accessible name is the label text + the placeholder text. If the control has a <code>title</code> attribute the placeholder text is still used as the accessible name and the title text is used as the accessible description.</p>
        <p><strong>Note:</strong> there are incompatibilities between the Firefox and Safari accessibility implementations of placeholder. </p>
      <p>Refer to: <a href="http://www.paciellogroup.com/blog/2011/02/html5-accessibility-chops-the-placeholder-attribute/">HTML5 accessibility Chops: the placeholder attribute</a></p></td>
    </tr>
 
  </table>
<hr>
<h3><a name="mbdetails">Mac browsers - Details</a></h3>
<table width="96%" border="1">
  <caption>
   <img src="images/mac-logo.png" width="64" height="64" alt=""> New HTML5 feature accessibility support in  Mac Browsers
</caption>
  <tr>
    <th scope="col">new HTML5 elements</th>
    <th scope="col"><img src="images/chrome.png" alt="" width="62" height="61" border="0"> <span style="display:block">chrome 18.0.1025.5 canary</span></th>
    <th scope="col"><img src="images/firefox.png" alt="" width="62" height="61" border="0"> <span style="display:block">Firefox 13.0a1</span></th>
    <th scope="col"><img src="images/opera.png" alt="" width="62" height="61" border="0"> <span style="display:block">Opera 11.6.1 </span></th>
    <th scope="col"><img src="images/safari.png" alt="" width="62" height="61" border="0"> <span style="display:block">Safari (5.1.2, r104664)</span></th>
    <th scope="col">Notes</th>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-article-element">article</a></code> element </th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><p><strong>Chrome,Firefox,Opera: </strong>provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element</p>
      <p><strong>Safari: </strong>Exposed in Mac API as AXRole:  &quot;AXGroup&quot;, AXSubrole:  &quot;AXDocumentArticle&quot;, AXRoleDescription:  &quot;article&quot;.</p></td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-aside-element">aside</a></code> element </th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><p><strong>Chrome,Firefox,Opera: </strong>provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element</p>
      <p><strong>Safari: </strong>Exposed in Mac API as AXRole:  &quot;AXGroup&quot;, AXSubrole:  &quot;AXLandmarkComplementary&quot;,<br>
AXRoleDescription:  &quot;complementary&quot;</p></td>
  </tr>
  <tr>
    <th scope="row"><a href="http://dev.w3.org/html5/spec/video.html#audio"><code>audio</code></a> element</th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><p><strong>Firefox &amp; </strong><strong>Opera</strong>: have keyboard support, but no AT support.</p>
<p><strong>Safari &amp; Chrome:</strong> Appears to be no keyboard access unless voiceover is running.</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://dev.w3.org/html5/spec/the-canvas-element.html#the-canvas-element">canvas</a></code> element</th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><p>No Mac browsers support the proposed canvas accessibility features.</p></td>
  </tr>
  <!--<tr>
    <td><a href="http://dev.w3.org/html5/spec/interactive-elements.html#the-command">command</a> element</td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>not implemented</td>
  </tr>-->
  <tr>
    <th scope="row"><code><a href="http://www.w3.org/TR/html5/forms.html#the-datalist-element">datalist</a></code> element </th>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><p><strong>Opera</strong>: keyboard accessible. </p>
      <p><strong>Firefox</strong>: keyboard accessible. </p>
<p><strong>Chrome:</strong> keyboard accessible. Does not expose datalist as list, does not convey presence of data list from the edit box</p></td>
  </tr>
  <tr>
    <th scope="row"><a href="http://dev.w3.org/html5/spec/interactive-elements.html#the-details-element"><code>details</code></a> element</th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><p><strong>Firefox,Opera: </strong>provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element</p>
      <p><strong>Chrome &amp; Safari: </strong>implemented, but no keyboard or AT support.</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://dev.w3.org/html5/spec/grouping-content.html#the-figcaption-element">figcaption</a></code> element</th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><p><strong>Chrome,Firefox,Opera, Safari: </strong>provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element</p></td>
  </tr>
  <tr>
    <th scope="row"><code><A href="http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element">figure</A></code> element</th>
    <td><img src="images/cross.png" alt="not supported" width="16" height="16" border="0"><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><p><strong>Chrome,Firefox,Opera, Safari: </strong>provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element</p></td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-footer-element">footer</a></code> element </th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><p>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</p>
      <p><strong>Safari:</strong> exposes  as AXRole:  &quot;AXGroup&quot;, AXSubrole:  &quot;AXLandmarkContentInfo&quot;, AXRoleDescription:  &quot;content&quot; Note:voicOver announces &quot;content&quot; doesnt seem useful description.</p></td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-header-element">header</a></code> element </th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><p>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</p>
      <p><strong>Safari:</strong> exposes  as AXRole:  &quot;AXGroup&quot;, AXSubrole:  &quot;AXLandmarkBanner&quot;, AXRoleDescription:  &quot;banner&quot; Note: is every header element announced as banner?</p></td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-hgroup-element">hgroup</a></code> element </th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><p>not implemented</p></td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/number-state.html#color-state">color</a><code> <a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><strong>Opera:</strong> partially keyboard accessible (cannot access 'other' button. No information exposed to assistive technology.</td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#date-state" title="attr-input-type-date">Date</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><span class="hidden">Not supported</span><img src="images/cross.png" width="16" height="16" alt=""></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><p><strong>Opera</strong>: date picker cannot be activated using the keybaord, no information exposed to assistive technology.</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#date-and-time-state" title="attr-input-type-datetime">Date and Time</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><span class="hidden">Not supported</span><img src="images/cross.png" width="16" height="16" alt=""></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><p><strong>Opera</strong>: date picker cannot be activated using the keybaord, no information exposed to assistive technology.</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#local-date-and-time-state" title="attr-input-type-datetime-local">Local Date and Time</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><span class="hidden">Not supported</span><img src="images/cross.png" width="16" height="16" alt=""></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><p><strong>Opera</strong>: date picker cannot be activated using the keybaord, no information exposed to assistive technology.</p></td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#e-mail-state" title="attr-input-type-email">E-mail</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>? mostly not implemented.</td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#month-state" title="attr-input-type-month">Month</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><span class="hidden">Not supported</span><img src="images/cross.png" width="16" height="16" alt=""></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><p><strong>Opera</strong>: date picker cannot be activated using the keybaord, no information exposed to assistive technology.</p></td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#number-state" title="attr-input-type-number">Number</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><p><strong>Opera</strong>: keyboard accessible.</p>
      <p><strong>Safari: </strong>Note: stepper controls are assigned role seperately from the edit box. The stepper is not currently recognized by VoiceOver.</p></td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#range-state" title="attr-input-type-range">Range</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><p><strong>Chrome:</strong> correct role, partial keyboard support, slider value not exposed.</p>
      <p><strong>Opera:</strong> no role, partial keyboard support, slider value not exposed.</p>
      <p><strong>Safari:</strong> exposed as AXRole:  &quot;AXSlider&quot;, AXSubrole:  &quot;(null)&quot;, AXRoleDescription:  &quot;slider&quot;</p></td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#text-state-and-search-state" title="attr-input-type-search">Search</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td>The difference between <code>input type=&quot;search&quot;</code> and <code>type=&quot;text&quot;</code> is '<a href="http://dev.w3.org/html5/spec/states-of-the-type-attribute.html#text-state-and-search-state">primarily stylistic</a>'.</td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#telephone-state" title="attr-input-type-tel">Telephone</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>?</td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#time-state" title="attr-input-type-time">Time</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><p><strong>Opera</strong>: keyboard accessible.</p></td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#url-state" title="attr-input-type-url">URL</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>?</td>
  </tr>
  <tr>
    <th scope="row"><a href="http://www.w3.org/TR/html5/forms.html#week-state" title="attr-input-type-week">Week</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><p><strong>Opera</strong>: date picker cannot be activated using the keybaord, no information exposed to assistive technology.</p></td>
  </tr>
  <!--<tr>
    <td><code><A href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-mark-element">mark</A></code></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td>Currently provides the same amount of semantic information to AT as a span element</td>
  </tr>-->
  <tr>
    <th scope="row"><code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code> &gt; <a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menu-state" title="context menu state">context menu</a></th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>not implemented </td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code>&gt; <a href="http://www.w3.org/TR/html5/interactive-elements.html#list-state" title="list state">list</a></th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>not implemented </td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code> &gt; <a href="http://www.w3.org/TR/html5/interactive-elements.html#toolbar-state" title="toolbar state">toolbar</a></th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>not implemented </td>
  </tr>
  <!--<tr>
    <td>descendant element (type=&quot;checkbox&quot;) of a <code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code>  type=&quot;list&quot; </td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>not implemented </td>
  </tr>
  <tr>
    <td>descendant element (type=&quot;command&quot;) of a <code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code> type=&quot;list&quot; </td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>not implemented </td>
  </tr>
  <tr>
    <td>descendant element (type=&quot;radio&quot;) of a <code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code> type=&quot;list&quot; </td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>not implemented </td>
  </tr>-->
  <tr>
    <th scope="row"><a href="http://dev.w3.org/html5/spec/the-button-element.html#the-meter-element">meter</a> element</th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><p><strong>Chrome, Safari, Opera: </strong>name, role, properties not exposed.</p></td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-nav-element">nav</a></code> element </th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><p><strong>Chrome,Firefox,Opera: </strong>provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element.</p>
      <p><strong>Safari:</strong> exposes  as AXRole:  &quot;AXGroup&quot;, AXSubrole:  &quot;AXLandmarkNavigation&quot;, AXRoleDescription:  &quot;navigation&quot;.</p></td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://dev.w3.org/html5/spec/the-button-element.html#the-output-element">output</a></code> element</th>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://www.w3.org/TR/html5/forms.html#the-progress-element">progress</a></code> element </th>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><p><strong>Chrome &amp; Safari:</strong> exposes as AXRole:  &quot;AXProgressIndicator&quot;, AXSubrole:  &quot;(null)&quot;, AXRoleDescription:  &quot;progress indicator&quot;, AXValue (W):  &quot;50&quot;.</p></td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://dev.w3.org/html5/spec/sections.html#the-section-element">section</a></code> element </th>
    <td><span class="hidden">Not supported</span><img src="images/cross.png" width="16" height="16" alt=""></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><p><strong>Chrome,Firefox,Opera: </strong>provide the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element.</p>
      <p><strong>Safari:</strong> exposes as AXRole:  &quot;AXGroup&quot;, AXSubrole:  &quot;AXDocumentRegion&quot;, AXRoleDescription:  &quot;region&quot;.</p></td>
  </tr>
  <tr>
    <th scope="row"><code><a href="http://dev.w3.org/html5/spec/interactive-elements.html#the-summary-element">summary</a></code> element</th>
    <td><span class="hidden">Not supported</span><img src="images/cross.png" width="16" height="16" alt=""></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><span class="hidden">Not supported</span><img src="images/cross.png" width="16" height="16" alt=""></td>
    <td><p>Provides the same amount of semantic information to AT as a <code>div</code> element.</p>
      <p><strong>Chrome &amp; Safari:</strong> no keyboard access and no useful role, state or name information exposed.</p></td>
  </tr>
  <!--<tr>
    <td><code><A href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-time-element">time</A></code> element</td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td>Currently provides the same amount of semantic information to AT as a span element</td>
  </tr>-->
  <tr>
    <th scope="row"><a href="http://dev.w3.org/html5/spec/video.html"><code>video</code></a> element</th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> <span class="hidden">Partially supported</span></td>
    <td><p><strong>Firefox &amp; </strong><strong>Opera</strong>: have keyboard support, but no AT support.</p>
      <p><strong>Safari &amp; Chrome:</strong> Appears to be no keyboard access unless voiceover is running.</p>
<p>&nbsp;</p></td>
  </tr>
</table>
<table width="96%" border="1">
  <caption>
    <img src="images/mac-logo.png" alt="" width="64" height="64">New HTML5 attribute accessibility support in Mac Browsers
</caption>
  <tr>
    <th scope="col">new HTML5 attributes (note: this is not all of them!)</th>
    <th scope="col"><img src="images/chrome.png" alt="" width="62" height="61" border="0"><span style="display:block">chrome 18.0.1025.5 canary</span></th>
    <th scope="col"><img src="images/firefox.png" alt="" width="62" height="61" border="0"><span style="display:block">Firefox 13.0a1</span></th>
    <th scope="col"><img src="images/opera.png" alt="" width="62" height="61" border="0"><span style="display:block">Opera 11.6.1 </span></th>
    <th scope="col"><img src="images/safari.png" alt="" width="62" height="61" border="0"><span style="display:block">Safari (5.1.2, r104664)</span></th>
    <th scope="col">Notes</th>
  </tr>
  <!--<tr>
    <td><code><a href="http://dev.w3.org/html5/spec/dnd.html#the-draggable-attribute">draggable</a></code> attribute</td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
   <td><img src="images/ni.gif" width="25" height="25" alt=""><span class="hidden">Not implemented</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td>&nbsp;</td>
  </tr>-->
  <tr>
    <th scope="row"><a href="http://dev.w3.org/html5/spec/editing.html#the-hidden-attribute">hidden</a> attribute</th>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><p><strong>Chrome, Opera, Firefox &amp; Safari: </strong>Content within elements that have a hidden attribute are not displayed or navigable. </p>
      <p><strong>Note:</strong> In all supporting browsers CSS <code>display:none</code> is applied to elements with the <code>hidden</code> attribute.<br>
      </p></td>
  </tr>
  <tr>
    <th scope="row"><a href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-required"><code>required</code></a> attribute</th>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"><span class="hidden">Not supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><p><strong>Firefox:</strong> exposes popup message as alertv and identifies the field as invalid.</p>
      <p><strong>Chrome:</strong> Identifies the field as required.</p></td>
  </tr>
  <tr>
    <th scope="row"><a href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#the-placeholder-attribute"><code>placeholder</code></a> attribute</th>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/cross.png" width="16" height="16" alt=""><span class="hidden">Not supported</span></td>
    <td><img src="images/tick.png" width="16" height="16" alt=""><span class="hidden"> Supported</span></td>
    <td><p>&nbsp;</p>
<p>Refer to: <a href="http://www.paciellogroup.com/blog/2011/02/html5-accessibility-chops-the-placeholder-attribute/">HTML5 accessibility Chops: the placeholder attribute</a></p></td>
  </tr>
</table>
<h3><a name="legend">Support Tables - Legend &amp; notes:</a></h3>
<ul>
  <li><img src="images/cross.png" width="16" height="16" alt=""> &quot;not supported&quot; means the feature is implemented by the browser, but required accessibility support is not implemented.</li>
  <li><img src="images/cross.gif" width="16" height="16" alt=""> <img src="images/tick.png" width="16" height="16" alt=""> &quot;partially supported&quot; means the feature is implemented and accessibility support is partially implemented.</li>
  <li><img src="images/ni.gif" width="25" height="25" alt=""> &quot;not implemented&quot; means the feature has not yet been implemented in the browser, so accessibility support is unknown.</li>
  <li><img src="images/tick.png" width="16" height="16" alt=""> &quot;supported&quot; means that the browser exposes feature information via an accessibility API and if the feature is interactive it can be operated using a range of input device types.</li>
  <li>The 'notes' cell of each row provides further information about browser support.</li>
  <li>A <a href="http://www.html5accessibility.com/html5elements/">test page</a> was used to test the support in each browser.</li>
  <li>The following tools were used to test the <a href="http://dev.w3.org/html5/spec/spec.html">HTML5</a> feature information being exposed in browsers to accessibility APIs:
    <ul>
      <li><A href="http://www.paciellogroup.com/blog/?p=635">Aviewer</A> (free desktop   application for windows ) </li>
      <li><A href="https://addons.mozilla.org/en-US/firefox/addon/6622/">Dom   Inspector</A> (free Firefox extension) </li>
      <li><A href="http://msdn.microsoft.com/en-us/library/dd318521%28v=vs.85%29.aspx">Inspect.exe</A> (free desktop application for windows available as part of the Windows SDK) </li>
      <li><A href="http://accessibility.linuxfoundation.org/a11yweb/util/accprobe/">Accprobe</A> (free   open source desktop application) </li>
      <li><A href="http://developer.apple.com/library/mac/#documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTesting/OSXAXTestingApps.html">Accessibility   Inspector</A>A(free Mac application) </li>
    </ul>
  </li>
  <li>Keyboard support was tested by attempting to use interactive controls using the keyboard.</li>
  <li>Please report any inaccuracies to <a href="mailto:sfaulkner@paciellogroup.com">sfaulkner@paciellogroup.com</a>.</li>
</ul>
<h4>HTML5 Accessibility Support Score calculation: </h4>
<ul>
  <li>37 new HTML5 features listed. </li>
  <li>100/Total number of new features implemented  = X</li>
  <li>Each feature implemented without any accessibility support = - X points</li>
  <li>Each feature implemented with partial support = -1/2 X points</li>
  <li>Total = 100 - X's and 1/2 X's.</li>
</ul>
<p>Example: Chrome 17 (windows) has 21 new features implemented. X = 100/21 = 4.76</p>
<p>15 features implemented without accessibility support = - 71.42</p>
<p>2 features implemented with partial accessibility support - 4.76</p>
<p>Total = 100 - 71.42 - 4.76 = <strong>24</strong></p>
<p>&nbsp;</p>

  <footer role="contentinfo"><p><A href="http://creativecommons.org/licenses/by-sa/2.0/uk/" rel="license"><IMG alt="Creative Commons License" src="http://i.creativecommons.org/l/by-sa/2.0/uk/88x31.png"></A><BR>
    This <SPAN rel="dc:type" href="http://purl.org/dc/dcmitype/Text" xmlns:dc="http://purl.org/dc/elements/1.1/">work</SPAN> is licenced under a <A href="http://creativecommons.org/licenses/by-sa/2.0/uk/" rel="license">Creative   Commons Licence</A>.</p>
  <p>Updated: 13/02/2012</p>
  </footer>
  <!-- Begin Web-Stat hit counter code -->
  <script type="text/javascript">
<!--
var page_name = 'HTML5 accessibility';
var invisible = '';
var framed = 'no';
function sE(){return true;}window.onError=sE;var base=document;
if(framed=='yes'){base=top.document;}var rn=Math.random();
var ui='mpaciello';
var qry=ui+':2::'+escape(base.referrer)+'::'+screen.width
+'x'+screen.height+'::'+screen.colorDepth+'::'+escape(page_name)
+'::'+invisible+'::'+rn+'::'+escape(base.URL);
document.write('<a href="http://www.web-stat.com/stats/');
document.write(ui+'.htm"><img src="http://server3.web-stat.com/count.pl?');
document.write(qry+'" alt=""/><\/a>');
//-->
</script>
  <noscript>
  <p>
  <a href="http://www.web-stat.com" tabindex=0>
  <img src="http://server3.web-stat.com/count.pl?mpaciello:2::NoJavaScript" border="0">
  </a>
  </p>
  </noscript>
</div>

</body>
</html>
